import React from 'react';

// 创建上下文对象
const AppContext = React.createContext();

// 从上下文对象中解构出提供商
const { Provider } = AppContext;


class App extends React.Component {
  state = {
    count: 0
  };
  render() {
    return (
      <div className="App">
        <h1>===App组件===</h1>
        <p>购物车数量：{this.state.count}</p>
        {/* 提供商提供数据 共享，数据写到 value 属性上 */}
        <Provider value={{ count: this.state.count }}>
          {/* 提供给 Header 组件 */}
          <Header />
        </Provider>
      </div>
    );
  }
}

class Header extends React.Component {
  // 接收父组件提供的上下文对象
  static contextType = AppContext;
  // 自动传递到 this.context 上
  render() {
    console.log('Header组件的实例', this);
    return (
      <>
        <h2>页面头部</h2>
      </>
    );
  }
}

export default App;
